<html>
<head>
  <meta charset="utf-8">
<script src="./js/jQuery-2.1.4.min.js"></script>

<script src="./js/jQueryUI/jquery-ui.js"></script>

<script src="./js/freewall.js"></script>
<script src="./js/angular.js"></script>

<link rel="stylesheet" href="./js/jQueryUI/jquery-ui.min.css" class="style">

<style>
  #container {
      width: 100%;
      margin: auto;
    }
    .item {
      background: rgb(135, 199, 135);
      width: 320px;
      height: 320px;
    }

</style>
</head>
<body ng-app="freewallApp" ng-controller="ctrl">
  <button id="reset" ng-click="refresh()">reset</button>
 
  <div id="container" freewall>
    <div class="item">
    	<div class="tool">
    			<button large>+</button><button small>-</button>
    	</div>
    	<div class="chart-box">1</div>
    </div>
    
    
    <div class="item">2<button large>+</button><button small>-</button></div>
    <div class="item">3<button large>+</button><button small>-</button></div>
    <div class="item">4<button large>+</button><button small>-</button></div>
    <div class="item">5<button large>+</button><button small>-</button></div>
    <div class="item">6<button large>+</button><button small>-</button></div>
    <div class="item">7<button large>+</button><button small>-</button></div>
  </div>

<script>
  var app=angular.module("freewallApp",[]);
  app.controller("ctrl",function($scope){
    $scope.refresh=function(){
      $scope.wall.unFilter();
    }
  });
  app.directive("freewall",function() {
    return{
      restrict:"A",
      link:function(scope,element,attr){
        var wall = new freewall(element);
        scope.wall=wall;
        wall.reset({
          draggable:true, //可以拖拽
          delay:50,       //延迟，动画效果不会太突兀
          animate:true,   //支持动画重载
          fixSize:false,   //固定block大小[true,false,null]
          //单元格大小
          // cellW:function(w){   
          //     return (w-20*3)/4;
          // },
          // cellH:function(h){
          //     return "auto";
          // },
          gutterX:10,   //间距x
          gutterY:10,   //间距y
          onResize:function(){  //窗体大小变化时的函数
            wall.fitWidth();
          }
        })
        wall.fitWidth();  //固定宽度进行布局。
        console.log(element.find(".item button[large]"))
        element.find(".item button[large]").click(function(){
          var dna=$(this).closest(".item");
          var w=dna.width();
          var h=dna.height();
          w=w*2;
          h=h*2;
          //改变某个block的大小
          wall.fixSize({
            block: dna,
            width: w,
            height: h
          });
          wall.fitWidth();
        });

        element.find(".item button[small]").click(function(){
          var dna=$(this).closest(".item");
          var w=dna.width();
          var h=dna.height();
          w=w/2;
          h=h/2;
          //改变某个block的大小
          wall.fixSize({
            block: dna,
            width: w,
            height: h
          });
          wall.fitWidth();
        });
      }
    }
  });
</script>
</body>
</html>